<!DOCTYPE html>
<html>
<head>
    <title>LUI组件库</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="keywords" content=""/>
    <meta name="description" content="" />
    <link rel="icon" href="images/icon/lui.png">
   
    <link rel="stylesheet" type="text/css" href="css/lui.css" />
</head>
<body>
     <div class="ui_page_wrap">
        <header class="ui_page_hd"><a href="javascript:history.go(-1);" class="ui_back"></a>弹出层</header>
        <div class="ui_page_bd">
            <p class="ui_con_block">
                合理使用弹出层，无需页面跳转，更便捷操作
            </p>
            <br>
            <div class="p10">
                <button type="button" class="ui_btn" onclick="togglePopup()">普通popup</button>
            </div>
            <div class="p10">
                <button type="button" class="ui_btn" onclick="togglePopup('fullCover')">底部弹出popup</button>
            </div>
            <div class="p10">
              <button type="button" class="ui_btn" onclick="togglePopup('halfCover')">底部弹出非全屏popup</button>
            </div>

            <br>
             <div class="p10">
                <button type="button" class="ui_btn ui_default_btn" onclick="togglePopup('leftCover')">左侧弹出popup</button>
            </div>
            <div class="p10">
              <button type="button" class="ui_btn ui_default_btn" onclick="togglePopup('rightCover')">右侧弹出popup</button>
            </div>
        </div>
    </div>

    <!--普通popup-->
    <aside class="ui_popup ui_popup_center" id="j-popup-normal">
        <div class="ui_popup_inner">   
          <main class="ui_popup_body">
            普通popup
          </main>
        </div>
    </aside>


    <!--底部弹出层-全覆盖-->
    <aside class="ui_popup ui_translate_top" id="j-popup-full">
        <div class="ui_popup_inner">   
          <header class="ui_popup_header">
              <h2 class="ui_popup_title">底部弹出层标题</h2>
              <a href="javascript:closePopup()" class="ui_close_dialog"></a>
          </header>
          <main class="ui_popup_body">
              <p class="ui_con_block">底部弹出层内容</p>   
          </main>
        </div>
    </aside>

    <!--底部弹出层-非全覆盖-->
    <aside class="ui_popup ui_popup_round ui_translate_top" id="j-popup-half" style="top:5%">
      <div class="ui_popup_inner">
        <header class="ui_popup_header">
          <h2 class="ui_popup_title">底部弹出层标题</h2>
          <a href="javascript:closePopup()" class="ui_close_dialog"></a>
        </header>
        <main class="ui_popup_body">
          <p class="ui_con_block">底部弹出层内容</p>
        </main>
      </div>
    </aside>


    <!--左侧弹出层-->
    <aside class="ui_popup ui_translate_left" id="j-popup-left" style="right:15%">
      <div class="ui_popup_inner">
        <header class="ui_popup_header">
          <h2 class="ui_popup_title">左侧弹出层标题</h2>
          <a href="javascript:closePopup()" class="ui_close_dialog"></a>
        </header>
        <main class="ui_popup_body">
          <p class="ui_con_block">左侧弹出层内容</p>
        </main>
      </div>
    </aside>

    <!--右侧弹出层-->
    <aside class="ui_popup ui_translate_right" id="j-popup-right" style="left:15%">
      <div class="ui_popup_inner">
        <header class="ui_popup_header">
          <h2 class="ui_popup_title">右侧弹出层标题</h2>
          <a href="javascript:closePopup()" class="ui_close_dialog"></a>
        </header>
        <main class="ui_popup_body">
          <p class="ui_con_block">右侧弹出层内容</p>
        </main>
      </div>
    </aside>

    <!-- 公共蒙层 -->
    <aside class="ui_mask" id="j-mask" onclick="closePopup()"></aside>

<script type="text/javascript" src="js/lui.js"></script>
<script type="text/javascript">
    var g_popupType = 'normal'
    function toggle(el){
      var _el = el || '#j-mask'
      var mask = document.querySelector(_el)
      var maskStyle = window.getComputedStyle(mask)
      mask.style.display = maskStyle.display === 'none' ? 'block' : 'none'
    }

    function togglePopup(popupType){
      g_popupType = popupType || 'normal'
      toggle()
      switch (popupType) {
        case 'fullCover':
          lui.popupHandler('#j-popup-full')
          break;
        case 'halfCover':
          lui.popupHandler('#j-popup-half')
          break;
        case 'leftCover':
          lui.popupHandler('#j-popup-left','left')
          break;
        case 'rightCover':
          lui.popupHandler('#j-popup-right','right')
          break;
        default:
          toggle('#j-popup-normal')
          break;
      }
    }

    function closePopup(){
      togglePopup(g_popupType)
    }
    
</script>
</body>
</html>